<template>
  <div class="prompt-container">
    <div class="header" style="display: flex;justify-content: space-between">
      <div style="margin-left: 12px;margin-bottom: 10px;display: inline-block;color: #9597a0;">
        {{$t('aicosCommon.saveNewPrompt')}}  <!--保存新创建的prompt前可点击“测试”按钮，结合现有配置进行生成测试-->
      </div>
      <div class="close">
        <i class="el-icon-close" @click="handlerCancel" style="cursor: pointer"></i>
      </div>
    </div>

    <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">

      <!--提示词-->
      <el-form-item :label="$t('largeModel.tipWord')+':'" prop="tipWord">
        <div class="tipWord-container" style="display: flex;justify-content: space-between">
          <div class="left" style="margin-right: 10px;flex: 1">
            <el-input
              maxlength="300"
              v-model="form.tipWord"
              show-word-limit
              type="textarea"
              :rows="4"
              :placeholder="$t('largeModel.tipWordTips')"
              ref="tipWordInput"
            >
            </el-input>
            <div class="insert-value" style="display: flex;justify-content: end">
              <div style="display: flex;align-items: end">
                <!-- 变量由${}表示 -->
                <span class="insert-tip" style="margin-right: 5px;color:#9597a0">{{$t('largeModel.valueTips')}}</span>
              </div>
            </div>
          </div>
          <div class="right">
            <el-button type="warning" size="small" @click="handlerTest">{{$t('aicosCommon.testBtn')}}</el-button>
          </div>
        </div>

      </el-form-item>

      <!--名称-->
      <el-form-item :label="$t('largeModel.name')+':'" prop="name">
        <div class="name-container" style="display: flex;justify-content: space-between">
          <div class="left" style="margin-right: 10px;flex: 1">
            <el-input
              maxlength="30"
              v-model="form.name"
              show-word-limit
              :placeholder="$t('largeModel.nameTips')"
            >
            </el-input>
          </div>
          <div class="right">
            <el-button type="primary" size="small" @click="handlerSave">{{$t('aicosCommon.saveBtn')}}</el-button>
          </div>
        </div>

      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {modelSettingChat,modelPromptSaveOrUpdate} from "@/api/aiccApi/aiccLargeModel";

export default {
  data(){
    return{
      form:{
        name:'',
        function:'1', //分类
        tipWord:'',  //提示词
        isDefault:0,
        pattern:2, //现在默认为普通模式
        isUse:0, //默认都没使用
        id:'',
      },
      rules:{
        name:[
          { required: true, message: this.$t('largeModel.nameTips'), trigger: 'blur' },
        ],
        tipWord:[
          { required: true, message: this.$t('largeModel.tipWordTipsTwo'), trigger: 'blur' },
        ],
      }
    }
  },

  props:{
    formData:{
      type:Object,
      default(){
        return {}
      }
    },
    content: {
      type: String,
      default: ''
    },
    type:{
      type:String,
      default(){
        return ''
      }
    },
  },

  methods:{
    //插入变量
    // handlerInsert(){
    //   const insert = '${content}';
    //   this.form.tipWord = this.form.tipWord + insert;
    //   this.$refs.tipWordInput.focus();
    // },

    handlerCancel(){
      this.$emit('handlerCancel')
    },

    //测试
    handlerTest(){
      const tipArr = ['tipWord'];
      const nameArr = ['name'];
      this.$refs.form.clearValidate(nameArr);
      this.$refs.form.validateField(tipArr, (valid) => {
        if (valid){
          return false
        }else {
          const val = this.formData;
          const info = {
            modelId:val.largeModel,
            // promatId:val.tipWord,
            promatContent:this.form.tipWord,
            pattern:val.mode,
            content:this.content,
            top:'',
            temperature:''
          };
          modelSettingChat(info).then(res=>{
            if(res.data.code == 200){
              var Data = res.data.data;
              if (Data !== null){
                Data = Data.replace(/^"|"$/g, '');
                Data = Data.replace(/\\(\\)?n/g, '\n');
                this.$emit('handlerTest',Data)
              }else {
                this.$emit('handlerTest','')
              }
            }
          })
        }
      })
    },
    //保存
    handlerSave(){
      this.$refs.form.validate((valid) => {
        if (!valid){
          return false
        }else{
          const form = this.form;
          const info = {
            name:form.name,
            type:2,
            isDefault:0,
            pattern:2,
            isUse:1,
            content:form.tipWord,
            id:'',
            businessType:this.type == 'similar' ? '1' : '2',
          };
          modelPromptSaveOrUpdate(info).then(res=>{
            if(res.data.code == 200){
              this.$emit('handlerSave')
              this.$message.success('保存成功');
            }
          }).catch(()=>{

          })
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.prompt-container{
  padding: 10px;
  //background: url("./asset/background.png") no-repeat center center ;
  background: #f4fafe;
  background-size: cover;
  border-radius: 10px;
}
</style>
